<template>

    <div>

        <h2>直接充值订单</h2>

        <div class="container">
            <div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-form-item label="搜索字段">
                        <el-select v-model="params.field_type" placeholder="搜索字段">
                            <el-option label="用户ID" value="user_id"></el-option>
                            <el-option label="油卡卡号" value="card_no"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键词">
                        <el-input v-model="params.keyword" placeholder="关键词"></el-input>
                    </el-form-item>
                    <el-form-item label="充值状态">
                        <el-select v-model="params.status" placeholder="请选择">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="0" value="0" label="未支付"></el-option>
                            <el-option key="1" value="1" label="已支付"></el-option>
                            <el-option key="2" value="2" label="待充值"></el-option>
                            <el-option key="3" value="3" label="已完成"></el-option>
                            <el-option key="-1" value="-1" label="已取消"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="充值方式">
                        <el-select v-model="params.recharge_mode" placeholder="请选择">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="1" value="1" label="自动"></el-option>
                            <el-option key="2" value="2" label="手动"></el-option>
                            <el-option key="3" value="3" label="混合"></el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="渠道来源">
                        <el-select v-model="params.channel" placeholder="请选择渠道">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option v-for="item in channels" :key="item.open_code" :value="item.open_code" :label="item.nickname"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-date-picker
                            v-model="params.datetime"
                            type="datetimerange"
                            start-placeholder="注册日期"
                            end-placeholder="注册日期"
                            :default-time="['00:00:01']">
                    </el-date-picker>

                    <el-form-item>
                        <el-button type="primary" @click="reload">查询</el-button>
                    </el-form-item>
                </el-form>

            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="订单ID"
                >
                </el-table-column>
                <el-table-column
                        prop="recharge_amount"
                        label="充值金额"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="pay_amount"
                        label="实付金额"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="discount"
                        label="折扣"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="oil_card.card_no"
                        label="油卡卡号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="oil_card.type_name"
                        label="油卡类型"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="oil_card.name"
                        label="持卡人姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="oil_card.mobile"
                        label="持卡人手机"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="user.open_code"
                        label="所属会员ID"
                        >
                </el-table-column>

                <el-table-column
                        prop="status_name"
                        label="状态"
                >
                </el-table-column>

                <el-table-column
                        prop="paid_at"
                        label="支付时间"
                >
                </el-table-column>
                <el-table-column
                        label="操作" fixed="right" width="180"
                >
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showTask(scope.row.id)">详情</el-button>
                        <el-button v-if="scope.row.recharge_mode==1" size="mini" @click="showHandle(scope.row)">改手动</el-button>
                        <el-button v-if="scope.row.recharge_mode==2" size="mini" @click="showHandle(scope.row)">改备注</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <charge-task ref="chargeTask"></charge-task>
        <handle-recharge ref="handleRecharge"></handle-recharge>

    </div>

</template>
<script>
  import ChargeTask from './RechargeTask.vue';
  import HandleRecharge from './HandleRecharge.vue';
  export default {
    components: {
      ChargeTask,HandleRecharge
    },
      data() {
        return {
          items: [],
          loading: true,
          params: {
            type: 2,
            limit: 10,
            offset: 0,
            field_type: 'user_id',
            keyword: '',
            datetime: [],
            status:'all',
            recharge_mode:'all'
          },
          currentPage: 1,
          total: 0,
          total_recharge_amount:0,
          total_pay_amount:0
        }
      },
      created() {
        this.fetchChannels();
        this.fetchRecharges();
        this.fetch();
      },
      methods: {
        fetchChannels(){
            axios.get('/admin/api/channels_kv').then((res)=>{
            if(res.data.code===0){
                this.channels = res.data.data;
            }
            }).catch(function() {
              this.$message('系统错误');
              this.loading = false;
            });
          },
          fetchRecharges(){
              axios.get('/admin/api/recharge').then((res)=>{
                if(res.data.code===0){
                    this.recharges = res.data.data.items;
                }
                }).catch(function() {
                  this.$message('系统错误');
                  this.loading = false;
                });
          },
        fetch() {
          axios.get('/admin/api/recharge_order', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              this.total = res.data.data.total;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        disable() {

        },

        enable() {

        },

        // 切换分页
        setPage: function(page) {
          this.currentPage = page;
          this.params.offset = (page - 1) * this.params.limit;
          this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        },
        showTask(orderId) {
          this.$refs.chargeTask.show(orderId);
        },
        showHandle(order){
          this.$refs.handleRecharge.show(order);
        }
      }
    }
</script>